﻿<%@ Page Title=" sửa ảnh" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/InSite.Master" CodeBehind="EditImage.aspx.vb" Inherits="Core.EditImage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<link rel="stylesheet" href="/static/inSite/css/jquery.Jcrop.min.css" type="text/css" media="all" />
<script src="/static/inSite/js/jquery.Jcrop.min.js" type="text/javascript"></script>
<script type="text/javascript">
	// CONFIG CROP and Thumbnail
	var inWidth;
	var inHeight;
	var scaleWidth;
	var scaleHeight;
	inWidth = 210;
	inHeight = 90;
	scaleWidth = 21;
	scaleHeight = 9;
	// END CONFIG CROP ang Thumbnail
	
    jQuery(function($){
		// Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      $('#target').Jcrop({
		bgOpacity: 0.7,
        bgColor: 'white',
        addClass: 'jcrop-dark',
		onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: scaleWidth / scaleHeight,
		minSize: [inWidth, inHeight],
		setSelect:   [ 0, 0, inWidth, inHeight ],
      },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
      });
      function updatePreview(c){
        if (parseInt(c.w) > 0){
          var rx = inWidth / c.w;
          var ry = inHeight / c.h;
          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
		  $('#x1').val(c.x);
		  $('#y1').val(c.y);
		  $('#x2').val(c.x2);
		  $('#y2').val(c.y2);
		  $('#w').val(c.w);
		  $('#h').val(c.h);
      };
	});
  </script>

    <table>
      <tr>
        <td>
          <img src="" id="target" alt="Flowers" width="600px" />
        </td>
	</tr>
	<tr>
        <td>
          <div style="width:210px;height:90px;overflow:hidden;">
            <img src="" id="preview" alt="Preview" class="jcrop-preview" />
          </div>
        </td>
      </tr>
    </table>

    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
      <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
      <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
      <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
      <label>W <input type="text" size="4" id="w" name="w" /></label>
      <label>H <input type="text" size="4" id="h" name="h" /></label>

</asp:Content>
